<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>

	<h:head>
<f:loadBundle basename="messages" var="msgs" />
<title><h:outputText value="#{msgs.title}" /></title>


<link rel="stylesheet" type="text/css" media="screen"
	href="${facesContext.externalContext.requestContextPath}/resources/css/validation/screen.css" />

<script
	src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"
	type="text/javascript"></script>
<script
	src="${facesContext.externalContext.requestContextPath}/resources/script/validation/jquery.validate.js"
	type="text/javascript"></script>

<style type="text/css" title="currentStyle">
	@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
</style>
<script type="text/javascript">

	$()
	.ready(
		function() {

			// validate signup form on keyup and submit
			$("#form")
				.validate(
					{
						rules : {
							'form:username' : {
								required : true,
								minlength : 2
							},
							'form:password' : {
								required : true,
								minlength : 5
							},
							'form:confirmPassword' : {
								required : true,
								minlength : 5,
								equalTo : $("[id='form:password']")
							},
							'form:email' : {
								required : true,
								email : true
							}
							
							
						},
						messages : {
							'form:username' : {
								required : "Please enter a username",
								minlength : "Your username must consist of at least 2 characters"
							},
							'form:password' : {
								required : "Please provide a password",
								minlength : "Your password must be at least 5 characters long"
							},
							'form:confirmPassword' : {
								required : "Please provide a password",
								minlength : "Your password must be at least 5 characters long",
								equalTo : "Please enter the same password as above"
							},
							'form:email' : "Please enter a valid email address"
						}
					});


			});
	
	
	function checkUser()
	{
		$("[id='form:check_user']").click();
		
	}
</script>

<style type="text/css">


#signupForm {
	width: 670px;
}

#signupForm label.error {
	margin-left: 10px;
	width: auto;
	display: inline;
}

</style>


	</h:head>
	<body>
		<h:form id='form' class="cmxform">
			<ui:include src="header/header.xhtml" />

			<br />
			<br />
			<br />

			<h:outputText value="#{msg.user_title}" />

			<p></p>


			<div id="div">
				<fieldset>
		<legend>Registration</legend>
		<p>
			<label for="username">Username</label>
			<h:inputText id="username" value="#{registerBean.username}" onblur="checkUser()">
			
			</h:inputText>
			<h:outputText id="output" value="#{registerBean.userAvailability}" />
		</p>
		<p>
			<label for="password">Password</label>
			<h:inputSecret id="password" value="#{registerBean.password}"></h:inputSecret>
		</p>
		<p>
			<label for="confirmPassword">Confirm password</label>
			<h:inputSecret id="confirmPassword" value="#{registerBean.confirmPassword}"></h:inputSecret>
		</p>
		<p>
			<label for="email">Email</label>
			<h:inputText id="email" value="#{registerBean.email}"></h:inputText>
		</p>
		<p>
			<label for="address">Address</label>
			<h:inputText id="address" value="#{registerBean.address}"></h:inputText>
		</p>
		<p>
			<label for="post_address">Post Address</label>
			<h:inputText id="post_address" value="#{registerBean.postAddress}"></h:inputText>
		</p>
		<p>
			<label for="mobile">Mobile</label>
			<h:inputText id="mobile" value="#{registerBean.mobile}"></h:inputText>
		</p>
		<p>
			<label for="phone">Phone</label>
			<h:inputText id="phone" value="#{registerBean.phone}"></h:inputText>
		</p>
		
		<p>
			<h:commandButton value="#{msg.submit}" action="#{registerBean.registerAction }">
			</h:commandButton>
			
			<a href="login.faces">
				<h:outputText value="#{msg.back_to_users}"></h:outputText>
			</a>
		</p>
	</fieldset>

			</div>

			<p></p>
			
			
			<div>
			<h:commandButton id="check_user" value="checkUser">
				<f:ajax execute="username" render="output"></f:ajax>
			</h:commandButton>
			
			</div>
			
		</h:form>
		<ui:include src="footer/footer.xhtml" />
	</body>

</f:view>
</html>
